<div class="table-operations">
  <button nz-button nzType="primary" (click)="addMeta()">添加权限</button>
  <nz-select class="group" nzShowSearch nzAllowClear nzPlaceHolder="选择分组" (ngModelChange)="changeGroup($event)" [(ngModel)]="metaGroupCheck">
    <nz-option *ngFor="let item of metaGroup" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
  </nz-select>
</div>
<nz-table #basicTable nzBordered [nzData]="dataSet">
  <thead>
    <tr>
      <th *ngFor="let item of headers">{{item}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of basicTable.data">
      <td>{{item.group_des}}({{item.group}})</td>
      <td>{{item.permission_des}}({{item.permission}})</td>
      <td>
        <nz-switch style="margin: 0 5px;" *ngFor="let role of roles" [ngModel]="item.roles.includes(role.code)"
          [nzCheckedChildren]="role.name" [nzUnCheckedChildren]="role.name" (ngModelChange)="changeMeta(item, role, $event)"></nz-switch>
      </td>
      <td>
        <a (click)="delMeta(item)">删除</a>
      </td>
    </tr>
  </tbody>
</nz-table>

<nz-modal [(nzVisible)]="modalVisible" nzTitle="添加权限" (nzOnCancel)="modalCancel()" (nzOnOk)="modalOk()">
  <form nz-form [formGroup]="metaForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="group">权限分组代码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="group" id="group">
        <nz-form-explain *ngIf="metaForm.get('group').dirty && metaForm.get('group').errors">权限分组代码必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="group_des">权限分组描述</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="group_des" id="group_des">
        <nz-form-explain *ngIf="metaForm.get('group_des').dirty && metaForm.get('group_des').errors">权限分组描述必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="permission">权限代码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="permission" id="permission">
        <nz-form-explain *ngIf="metaForm.get('permission').dirty && metaForm.get('permission').errors">权限代码必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="permission_des">权限描述</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="permission_des" id="permission_des">
        <nz-form-explain *ngIf="metaForm.get('permission_des').dirty && metaForm.get('permission_des').errors">权限描述必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="roles">包含角色</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-checkbox-group formControlName="roles"></nz-checkbox-group>
        <nz-form-explain *ngIf="metaForm.get('roles').dirty && metaForm.get('roles').errors">角色必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
